<template>
  <div class="role-manage">
    <!-- 业务搜索框 -->
    <!-- <search-block @handleSearch="handleSearch"></search-block> -->
    <!-- 搜索框和按钮组件 -->
    <operate-button
      :buttonDisplayRange="buttonDisplayRange"
      :multipleSelection="multipleSelection"
      :refSelectType="refSelectType"
      @handleRefSelect="handleRefSelect"
      @handleSearch="handleSearch"
    ></operate-button>
    <div class="pagination-table-container">
      <tree-table
        :currentPage="currentPage"
        :operateButton="operateButton"
        :pageSize="pageSize"
        :pageSizes="pageSizes"
        :tableData="tableData"
        :tableLabel="tableLabel"
        :total="total"
        @changePager="changePager"
        @changeSelection="changeSelection"
        @load="load"
        ref="treeTable"
      >
        <template v-slot:default="slotProps">
          <el-button
            @click="handleMenu(slotProps.scope.$index, slotProps.scope.row)"
            plain
            round
            size="mini"
            type="primary"
          >分配菜单</el-button>
          <el-button
            @click="handlePermission(slotProps.scope.$index, slotProps.scope.row)"
            plain
            round
            size="mini"
            type="primary"
          >分配权限</el-button>
        </template>
      </tree-table>
    </div>

    <el-dialog :visible.sync="menuManageVisible" title="分配菜单" width="75%">
      <el-row>
        <el-col :span="18">
          <menu-manage
            :operateButton="refMenuOperateButton"
            :refButtonDisplayRange="refMenuButtonDisplayRange"
            @changeMenuManageSelection="changeMenuManageSelection"
          ></menu-manage>
        </el-col>
        <el-col :span="6">
          <right-part-table
            :tableData="roleMenuData"
            @clickCaretLeft="clickCaretLeft"
            @clickCaretRight="clickCaretRight"
            @rightPartSelectionChange="rightPartSelectionChange"
            @submitSelect="handleRoleMenuData"
          >
            <template>
              <el-table-column label="名称" prop="menuTitle"></el-table-column>
            </template>
          </right-part-table>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import TreeTable from '@/components/PaginationTable/treeTable'
import RightPartTable from '@/components/PaginationTable/rightPart'
import MenuManage from '@/views/system/menu/menuManage'
export default {
  name: 'RoleManage',
  components: {
    SearchBlock,
    OperateButton,
    TreeTable,
    RightPartTable,
    MenuManage
  },
  props: {
    refButtonDisplayRange: String,
    refSelectType: String,
    operateButton: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      refMenuButtonDisplayRange: 'permission',
      refMenuSelectType: 'multiple',
      refMenuOperateButton: false,
      menuManageVisible: false,
      buttonDisplayRange: 'manage',
      multipleSelection: [],
      hasSelectedRow: {},
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'name', keyword_zh: '名称' },
        { keyword: 'id', keyword_zh: 'id' }
      ],
      tableData: [],
      roleMenuData: [],
      currentPage: 1,
      selectRow: {},
      selectMenuManageRow: [],
      roleMenuSelection: []
    }
  },
  mounted() {
    if (this.refButtonDisplayRange) {
      this.buttonDisplayRange = this.refButtonDisplayRange
    }
    this.getTableData()
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    role() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        sortPointer: {
          field: 'created_at'
        }
      }
    }
  },
  methods: {
    clickCaretRight() {

      var tempArr = []
      this.selectMenuManageRow.forEach(selectMenu => {
        tempArr.push(selectMenu)
      })

      var len = this.selectMenuManageRow.length

      //对比两个数组，去重
      this.roleMenuData.forEach(roleMenu => {
        var flag = true
        var menuId = roleMenu.menuId
        for (var i = 0; i < len; i++) {
          var selectRow = this.selectMenuManageRow[i]
          var selectMenuId = selectRow.menuId
          if (menuId === selectMenuId) {
            flag = false
            break
          }
        }
        if (flag) {
          tempArr.push(roleMenu)
        }
      })
      this.roleMenuData = tempArr
    },
    clickCaretLeft() {
      var tempArr = []
      this.roleMenuData.forEach(roleMenu => {
        tempArr.push(roleMenu)
      })
      var len = tempArr.length
      for (var i = 0; i < len; i++) {
        var temp = tempArr[i]
        this.roleMenuSelection.forEach(roleMenu => {
          if (temp.menuId === roleMenu.menuId) {
            delete tempArr[i]
          }
        })
      }
      this.roleMenuData = tempArr
    },
    rightPartSelectionChange(val) {
      this.roleMenuSelection = val
    },
    changeMenuManageSelection(multipleSelection) {
      this.selectMenuManageRow = []
      multipleSelection.forEach(selection => {
        var selectMenu = {
          menuId: selection.id,
          menuTitle: selection.title,
          roleId: this.selectRow.id
        }
        this.selectMenuManageRow.push(selectMenu)
      })
    },
    handleRoleMenuData() {
      this.menuManageVisible = false
      var roleId = this.selectRow.id
      var menuIds = []
      this.roleMenuData.forEach(roleMenu => {
        menuIds.push(roleMenu.menuId)
      })
      var params = {
        roleId: roleId,
        menuIds: menuIds
      }
      this.$store.dispatch('menu/handleRoleMenu', params).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
    },
    handleMenu(index, row) {
      this.selectRow = row
      var roleId = row.id
      this.menuManageVisible = true
      //获取当前角色的菜单
      this.$store.dispatch('menu/getByRoleId', roleId).then(roleMenuList => {
        this.roleMenuData = roleMenuList
      })
    },
    handlePermission(index, row) {},
    load(params) {
      var tree = params.tree
      var treeNode = params.treeNode
      var resolve = params.resolve
      this.$store.dispatch('role/getByPid', tree.id).then(res => {
        resolve(res)
      })
    },
    handleRefSelect(multipleSelection) {
      this.multipleSelection = multipleSelection
      this.$emit('refManageSelectData', this.multipleSelection)
    },
    changeSelection(val) {
      this.multipleSelection = val
      this.$emit('changeRoleManageSelection', val)
    },
    changePager(pager) {
      this.role.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store.dispatch('role/queryForList', this.role).then(res => {
        this.total = res.total
        this.tableData = res.list
      })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.role.id = searchParams.id
        this.role.title = searchParams.title
        this.role.pid = searchParams.pid
      }
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 20px;
}
.operate-button-container {
  padding: 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
</style>

